* {
    margin: 0;
    padding: 0;
    list-style: none;
}

body {
    background-color: rgb(250, 220, 245);
    height: 100vh;
    justify-content: center;
    align-items: center;
}

/* -------------------------------------------- */
/* 外层容器 */
/* -------------------------------------------- */
.wrap {
    position: relative;
    width: 570px;
    /* 36vw */
    height: 330px;
    /* 36vh */
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 10px rgb(0, 0, 0, .5);
    overflow: hidden;
    border-radius: 0 0 30px 30px;
    margin:1.5vw;
}

/* -------------------------------------------- */
/* 上部分的块 */
/* -------------------------------------------- */
.box-top {
    position: relative;
    width: 100%;
    height: 39.4%;
    /* 130px */
    background-color: rgb(180, 180, 210);
    display: flex;
    justify-content: center;
    transition: .5s;
}

.box-top::after {
    content: '';
    width: 40px;
    height: 40px;
    clip-path: polygon(50% 40%, 0 0, 100% 0);
    background-color: rgb(180, 180, 210);
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: -38px;
    z-index: 999;
}

.image {
    position: absolute;
    top: 11.53%;
    width: 18%;
    /* 35 */
    height: 80.76%;
    background-size: cover;
    border: 5px solid rgb(140, 140, 170);
    transition: .5s;
}

/* -------------------------------------------- */
/* 下部分的两个大块 */
/* -------------------------------------------- */
.box-bottom,
.box-bottom2 {
    position: absolute;
    top: 39.4%;
    /* 130 */
    width: 100%;
    height: 39.4%;
    text-align: center;
    transition: .5s;
    z-index: 9999;
}

.box-bottom h2 {
    display: block;
    margin: 30px 0 10px 0;
    font: 800 28px 'Hobo Std';
}

.box-bottom span {
    font: 400 24px 'Giddyup Std';
}

.box-bottom h2::after {
    content: '';
    display: block;
    width: 35%;
    height: 1px;
    background-color: #000;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 4px);
}

/* -------------------------------------------- */
/* 下部分的第二个大块 */
/* -------------------------------------------- */
.box-bottom2 {
    top: 90.9%;
    /* 300 */
    height: 66.67%;
    /* 220 */
    margin-left: 3.5%;
}

.box-bottom2 li {
    margin: 25px;
    font: 800 18px 'OCR A Std';
    transition: .2s;
}

/* -------------------------------------------- */
/* 鼠标移入的效果 */
/* -------------------------------------------- */
.wrap:hover .box-top {
    height: 15.15%;
    /* 50 */
}
.box-top.hover{
    height: 15.15%;
}
.wrap:hover .image {
    width: 35px;
    height: 35px;
    border-width: 3px;
    transform: translate(-140px, -3px);
    /* -140,-15 */
}
.image.hover{
    width: 35px;
    height: 35px;
    border-width: 3px;
    transform: translate(-140px, -3px);
}

.wrap:hover .box-bottom {
    animation: bottom_animation .5s linear forwards;

}
.box-bottom.hover{
    animation: bottom_animation .5s linear forwards;
}


.wrap:hover .box-bottom h2 {
    animation: font_animation .7s ease forwards;
}
.box-bottom h2.hover{
    animation: font_animation .7s ease forwards;
}

.wrap:hover .box-bottom span {
    animation: font_animation .7s ease forwards;
}
.box-bottom span.hover{
    animation: font_animation .7s ease forwards;
}

.wrap:hover .box-bottom2 {
    top: 50px;
}
.box-bottom2.hover{
    top: 50px;
}

.wrap:not(:hover) .box-bottom {
    animation: bottom_animation_reverse .5s linear forwards;
}

@keyframes bottom_animation_reverse {
    0% {
        transform: translate(0px, -160px);
    }

    100% {
        transform: translate(0px, 0px);
    }
}

/* 设置回去的动画 */
li:hover {
    color: rgb(100, 160, 160)
}

@keyframes font_animation_leave {
    from {
        font-size: 14px;
    }

    to {
        font-size: 28px;
    }

    /* 假设原始大小是28px */
}

.wrap:not(:hover) .box-bottom h2,
.wrap:not(:hover) .box-bottom span {
    animation: font_animation_leave .7s ease forwards;
}

@keyframes bottom_animation {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0px, 150px);
    }

    51% {
        transform: translate(500px, 300px);
    }

    52% {
        transform: translate(500px, -300px);
    }

    53% {
        transform: translate(0px, -300px);
    }

    100% {
        transform: translate(0px, -160px);
    }
}

@keyframes font_animation {
    from 90% {
        font: 400 14px 'Hobo Std';
    }

    100% {
        font: 400 14px 'Hobo Std';
    }
}












/* 固定悬停效果 */
.wrap.hover-fixed .box-top {
    height: 15.15%;
}

.wrap.hover-fixed .image {
    width: 35px;
    height: 35px;
    border-width: 3px;
    transform: translate(-140px, -3px);
}

.wrap.hover-fixed .box-bottom {
    animation: bottom_animation .5s linear forwards;
}

.wrap.hover-fixed .box-bottom h2,
.wrap.hover-fixed .box-bottom span {
    animation: font_animation .7s ease forwards;
}

.wrap.hover-fixed .box-bottom2 {
    top: 50px;
}